import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from '../store';

import { message, Input, Button, Table, Menu, Dropdown, InputNumber, Popconfirm, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';

import TaskDetail from './taskDetail/taskDetail';

const { Column } = Table;

class taskMonitor extends Component{
  state={
    page: 10,
    currentTaskId: undefined,
    currentTaskStatus: undefined,
  };

  handleMenuClick = (e) => {
    let taskId = this.state.currentTaskId;
    let taskStatus = this.state.currentTaskStatus;
    if (e.key === '运行') {
      this.props.runTask(taskId);
    }else if(e.key === '暂停/重启'){
      this.props.pauseTask(taskId);
    }else if(e.key === '终止'){
      if(taskStatus === '未开始'){
        message.info('未开始的任务不能终止')
      }else{
        this.props.stopTask(taskId);
      }
    }
    this.setState({
      currentTaskId: undefined,
      currentTaskStatus: undefined,
    });
  };

  changePage = (value) => {
    this.setState({page:value});
  }

  handleDetailClick = (taskId) => {
    this.props.getTaskInfo(taskId);
    this.detail.handleClick();
  }

  componentDidMount(){
    this.props.onRef(this);
    let username = "admin";//待修改
    this.props.getTaskList(username);
  }

  render(){
    const { total, totalPage, page } = this.state;
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="运行">运行</Menu.Item>
        <Menu.Item key="暂停/重启">暂停/重启</Menu.Item>
        <Menu.Item key="终止">终止</Menu.Item>
      </Menu>
    );
    return (
      <div>
        <Table pagination={{pageSize:page,showSizeChanger:false}} dataSource={this.props.tasks}>
          <Column title="序号" render={(text, record, index)=><span>{index+1}</span>} width="10%"/>
          {/* <Column title="服务编号" dataIndex="taskId" key="taskId"/> */}
          <Column title="服务名称" dataIndex="taskName" key="taskName" width="15%"/>
          <Column title="采集周期" dataIndex="taskTypeName" key="taskTypeName" width="15%"/>
          <Column title="运行状态" dataIndex="taskStatus" key="taskStatus" width="15%"/>
          <Column title="创建时间" dataIndex="createDate" key="createDate" width="20%"/>
          {/* <Column title="源数据库连接" dataIndex="sourceName" key="sourceName"/>
          <Column title="目标数据库连接" dataIndex="targetName" key="targetName"/> */}
          <Column title="操作" dataIndex="operation" key="operation"
          render={(text,record)=>(
            <Space>
              <a onClick={()=>this.handleDetailClick(record.taskId)}>查看</a>
              <TaskDetail onRef={ref=>this.detail=ref}/>
              <a >编辑</a>
              <Popconfirm
              title="确认删除?"
              onConfirm={() => this.props.deleteTask(record.taskId)}
              >
                <a >删除</a>
              </Popconfirm>
              <Dropdown overlay={menu} trigger={['click']}>
                <a onClick={e => {e.preventDefault();this.setState({currentTaskId:record.taskId,currentTaskStatus:record.taskStatus});}}>
                  更新状态<DownOutlined />
                </a>
              </Dropdown>
              <Link to={{pathname:'/dataCollection/monitor', query: {record}}} >
                监视
              </Link>
            </Space>
          )}/>
        </Table>
        <div className={this.props.tasks.length>0?'footer':'withoutPagination'}>
          显示<InputNumber min={1} defaultValue={page} onChange={this.changePage}/>项结果，共{this.props.tasks.length}项
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    tasks: state.getIn(['task','tasks']).toJS()
  }
}

const mapDispatchToProps = (dispatch) => ({
  getTaskList(username){
    dispatch(actionCreators.getTaskListOperation(username));
  },
  runTask(taskId){
    dispatch(actionCreators.runTaskOperation(taskId));
  },
  deleteTask(taskId){
    dispatch(actionCreators.deleteTaskOperation(taskId));
  },
  pauseTask(taskId){
    dispatch(actionCreators.pauseTaskOperation(taskId));
  },
  stopTask(taskId){
    dispatch(actionCreators.stopTaskOperation(taskId));
  },
  getTaskInfo(taskId){
    dispatch(actionCreators.getTaskInfoOperation(taskId));
  },
})

export default connect(mapStateToProps, mapDispatchToProps)(taskMonitor);